<template>
  <div class="box" @mouseenter="downInt" @focus="downInt" @mouseleave="onInt" @blur="onInt">
    <el-tabs class="box" type="border-card" v-model="activeName">
        <el-tab-pane
          v-for="(item) in tabList"
          :key="item.id"
          :label="item.name"
          :name="item.idDir">
          {{item.main}}
        </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script>
export default {
  props: {
    // tabList: {
    //   type: Array,
    //   default: () => [],
    // },
  },
  data() {
    return {
      activeName: null,
      timer: null,
      num: 0,
      // 模拟数据
      tabList: [
        {
          id: 1,
          idDir: '1',
          name: '用户管理',
          main: '用户管理',
        },
        {
          id: 2,
          idDir: '2',
          name: '配置管理',
          main: '配置管理',
        },
        {
          id: 3,
          idDir: '3',
          name: '角色管理',
          main: '角色管理',
        },
        {
          id: 4,
          idDir: '4',
          name: '定时任务补偿',
          main: '定时任务补偿',
        },
      ],
    };
  },
  created() {
    this.onInt();
  },
  mounted() {
    if (this.tabList.length !== 0) {
      const [activeName] = this.tabList;
      this.activeName = activeName.idDir;
    }
  },
  destroyed() {
    this.downInt();
  },
  // 切换标签
  watch: {
    activeName() {
      this.num = this.tabList.findIndex((item) => item.idDir === this.activeName);
    },
  },
  methods: {
    // 自动切换
    onInt() {
      this.timer = setInterval(() => {
        this.activeName = this.tabList.length ? this.tabList[this.num].idDir : '0';
        console.log();
        this.num = this.num >= this.tabList.length - 1 ? 0 : this.num += 1;
      }, 1000);
    },
    // 关闭自动切换
    downInt() {
      clearInterval(this.timer);
      this.timer = null;
    },
  },
};
</script>
<style scoped>
.box{
  height: 100%;
}
</style>
